<template>
  <div class="page-view">
    <div class="map-view">
      <MyMap @ready="ready" :zoom="11.1" ref="myMap">
        <MapMarker
          :data="markerData"
          :scale="0.5"
          :cluster="false"
          :distance="10"
          @show="clickPoint"
          @close="closePoint"
          :popup="{ width: '500px', title: '样点详情'}"
        >
          <template>
            <div>
              <a-spin :spinning="loading">
                <a-descriptions title="位置信息" :column="1" bordered size="small">
                  <a-descriptions-item label="样点编号" :span="1">
                    {{ markerInfo['ydbh'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="坐落单位名称" :span="1">
                    {{ markerInfo['zldwmc'] }}
                  </a-descriptions-item>
                  <a-descriptions-item label="经纬度" :span="1">
                    {{ markerInfo['jd'],markerInfo['wd'] }}
                  </a-descriptions-item>
                  <a-descriptions-item label="是否修正" :span="1">
                    {{ SFXZ[markerInfo['sfxz']] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="修正原因" :span="1">
                    {{ markerInfo['xzyy'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="修正距离" :span="1">
                    {{ `${markerInfo['xzjl'] || '0'} m` }}
                  </a-descriptions-item>
                  <a-descriptions-item label="土地利用类型" :span="1">
                    {{ markerInfo['tdlylx'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="土壤类型编码" :span="1">
                    {{ markerInfo['trlxbm'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="土类" :span="1">
                    {{ markerInfo['tl'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="亚类" :span="1">
                    {{ markerInfo['yl'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="土属" :span="1">
                    {{ markerInfo['ts'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="土种" :span="1">
                    {{ markerInfo['tz'] || '' }}
                  </a-descriptions-item>
                </a-descriptions>
                <br/>
                <a-descriptions title="外业调查信息" :column="1" bordered size="small">
                  <a-descriptions-item label="海拔高度" :span="1">
                    {{ markerInfo['hbgd'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="天气情况" :span="1">
                    {{ TQQK[markerInfo['tqqk']] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="采样时间" :span="1">
                    {{ markerInfo['cysj'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="景观照片东" :span="1">
                    {{ markerInfo['jgzpd'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="侵蚀类型" :span="1">
                    {{ QSLX[markerInfo['qslx']] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="侵蚀程度" :span="1">
                    {{ QSCD[markerInfo['qscd']] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="地形部位" :span="1">
                    {{ markerInfo['dxbw'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="坡度" :span="1">
                    {{ PD[markerInfo['pdn']] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="坡型" :span="1">
                    {{ PXN[markerInfo['pxn']] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="坡向" :span="1">
                    {{ PX[markerInfo['px']] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="母岩" :span="1">
                    {{ MY[markerInfo['my']] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="母质" :span="1">
                    {{ MZ[markerInfo['mz']] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="植被类型" :span="1">
                    {{ ZBLX[markerInfo['zblx']] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="植物优势种" :span="1">
                    {{ markerInfo['zbzwysz'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="草本覆盖度" :span="1">
                    {{ markerInfo['zbcbfgd'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="种植季节" :span="1">
                    {{ LFZLJJ[markerInfo['lfzljj']] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="作物类型" :span="1">
                    {{ markerInfo['zwlx'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="林地类型" :span="1">
                    {{ LCLDLX[markerInfo['lcldlx']] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="林地林龄" :span="1">
                    {{ markerInfo['lcldll'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="草地类型" :span="1">
                    {{ LCCDLX[markerInfo['lccdlx']] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="耕作层厚度" :span="1">
                    {{ markerInfo['gzchd'] || '' }}
                  </a-descriptions-item>
                </a-descriptions>
                <a-descriptions title="土壤理化检测指标" :column="1" bordered size="small" style="margin-top: 10px;">
                  <a-descriptions-item label="阳离子交换量" :span="1">
                    {{ markerInfo['cec'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="有机质" :span="1">
                    {{ markerInfo['om'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="全氮" :span="1">
                    {{ markerInfo['tn'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="全磷" :span="1">
                    {{ markerInfo['tp'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="全钾" :span="1">
                    {{ markerInfo['tk'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="有效磷" :span="1">
                    {{ markerInfo['ap'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="缓效钾" :span="1">
                    {{ markerInfo['sk'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="速效钾" :span="1">
                    {{ markerInfo['ak'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="总铬" :span="1">
                    {{ markerInfo['cr'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="总镉" :span="1">
                    {{ markerInfo['cd'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="总铅" :span="1">
                    {{ markerInfo['pb'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="总砷" :span="1">
                    {{ markerInfo['as2'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="总汞" :span="1">
                    {{ markerInfo['hg'] || '' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="总镍" :span="1">
                    {{ markerInfo['ni'] || '' }}
                  </a-descriptions-item>
                </a-descriptions>
              </a-spin>
            </div>
          </template>
        </MapMarker>
        <MapScale></MapScale>
        <MapQuery></MapQuery>
        <div class="left-tree">
          <div class="warp">
            <div class="tree-content" v-if="isShowTree">
              <div class="header">资源目录</div>
              <div>
                <MapTree @change="handleChange"></MapTree>
              </div>
            </div>
            <div class="close" @click="isShowTree = !isShowTree">
              <a-icon type="caret-left" v-if="isShowTree"/>
              <a-icon type="caret-right" v-if="!isShowTree" />
            </div>
          </div>
        </div>
        <div class="page-legend">
          <MapLegend ref="legendRef" :legend="legend"></MapLegend>
        </div>
      </MyMap>
    </div>
    <div class="reslut-filds">
      <div style="height: 260px">
        <EchartsBox :data="cahrtData"></EchartsBox>
      </div>
      <div style="height: 300px">
        <BarChart :data="barChart"></BarChart>
      </div>
    </div>
  </div>
</template>

<script>
import { TDLYLX, SFXZ, TQQK, QSLX, QSCD, PD, PXN, PX, MY, MZ, ZBLX, LFZLJJ, LCLDLX, LCCDLX } from '@/constant/index.js'
import { MyMap, MapMarker, MapScale, MapQuery, MapLegend } from '@/map'
// import { queryiQuery } from '@/api/home'
import { queryAllcity } from '@/api/common'
import { queryPointList } from '@/api/list'
// import yd from '@/assets/icon/yd.png'
// import ld from '@/assets/icon/ld.png'
// import cd from '@/assets/icon/cd.png'
import MapTree from './components/tree'
import EchartsBox from './components/echartsBox.vue'
import BarChart from './components/barChart.vue'

const MARKER_IMG = {
  '02': 'rgba(38, 70, 83, 1)', // yd,
  '03': 'rgba(41, 157, 144, 1)', // ld,
  '04': 'rgba(232, 193, 107, 1)' // cd
}

const legend = [
  { name: '园地', color: MARKER_IMG['02'], key: '02' },
  { name: '林地', color: MARKER_IMG['03'], key: '03' },
  { name: '草地', color: MARKER_IMG['04'], key: '04' }
]

export default {
  name: 'HomeView',
  components: {
    BarChart,
    EchartsBox,
    MyMap,
    MapMarker,
    MapScale,
    MapTree,
    MapQuery,
    MapLegend
  },
  data () {
    this.TDLYLX = TDLYLX
    this.SFXZ = SFXZ
    this.TQQK = TQQK
    this.QSLX = QSLX
    this.QSCD = QSCD
    this.PD = PD
    this.PXN = PXN
    this.PX = PX
    this.MY = MY
    this.MZ = MZ
    this.ZBLX = ZBLX
    this.LFZLJJ = LFZLJJ
    this.LCLDLX = LCLDLX
    this.LCCDLX = LCCDLX
    return {
      legend,
      loading: false,
      markerData: [],
      markerInfo: {},
      data: [],
      isShowTree: false,
      showMarker: true,
      cahrtData: [],
      barChart: []
    }
  },
  methods: {
    ready (map) {
      this.map = map
      this.isShowTree = true
    },
    handleChange (node, type) {
      if (node.key === '7-1') {
        if (!type) {
          this.markerData = this.markerData.filter(item => item.ydlb !== '0')
        } else {
          const data = this.data.filter(item => item.ydlb === '0')
          this.markerData = this.markerData.concat(data)
        }
      }
      if (node.key === '7-2') {
        if (!type) {
          this.markerData = this.markerData.filter(item => item.ydlb !== '1')
        } else {
          const data = this.data.filter(item => item.ydlb === '1')
          this.markerData = this.markerData.concat(data)
        }
      }
      if (this.markerData.length === 0) {
        this.legend = []
      } else {
        this.legend = legend
      }
      this.$nextTick(() => {
        this.$refs.legendRef.getMapLegend()
      })
    },
    async getData () {
      try {
        const { data } = await queryPointList()
        // 过滤耕地类型
        const filrter = data.filter(item => {
          return !(/^01\d/.test(item.tdlylx))
        })
        this.data = filrter.map(point => {
          return {
           ...point,
            coordinate: [Number(point.jd), Number(point.wd)],
            style: this.setMarkerStyle(point)
          }
        })
        this.markerData = this.data
        this.drawChart()
      } catch (err) {
        this.$message.error('查询失败')
      }
    },
    setMarkerStyle (point) {
      return {
        fill: MARKER_IMG[point.tdlylx.substring(0, 2)],
        radius: 5
      }
    },
    async clickPoint (marker) {
      this.loading = true
      try {
        this.data = this.data.map(point => {
          if (point.ydbh === marker.items[0].ydbh) {
            this.$refs.myMap.moveTo([ point.jd, point.wd ])
            return {
              ...point,
              style: {
                fill: '#f00',
                radius: 6
              }
            }
          } else {
            return {
              ...point,
              style: this.setMarkerStyle(point)
            }
          }
        })
        this.markerInfo = marker.items[0]
        this.loading = false
      } catch (err) {
        this.loading = false
        this.$message.error(err || '查询失败')
      }
    },

    closePoint () {
      this.data = this.data.map(point => {
        return {
          ...point,
          coordinate: [Number(point.jd), Number(point.wd)],
          style: this.setMarkerStyle(point)
        }
      })
    },
    async drawChart () {
      const data = {}
      this.data.forEach(item => {
        const key = item.ydlb
        if (!data[key]) {
          data[key] = 0
        }
        data[key] = data[key] + 1
      })

      this.cahrtData = [
        { name: '表层点', value: data[0] || 0 },
        { name: '剖面点', value: data[1] || 0 }
      ]

      const city = await queryAllcity()
      const cityData = city.data[0].children.find(item => item.dicCode === '110117').children
      this.barChart = cityData.map(item => {
        const value = this.data.filter(point => point.zldwdm.substring(0, 9) === item.dicCode)
        return {
          name: item.dicValue,
          bm: value.filter(point => point.ydlb === '0').length,
          pm: value.filter(point => point.ydlb === '1').length
        }
      })
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style lang="less" scoped>
.page-view {
  position: relative;
  height: 100%;
  .map-view {
    position: absolute;
    top: -24px;
    right: -24px;
    bottom: -24px;
    left: -24px;
  }
  .left-tree {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    height: 100%;
    background: #ffffff;
  }
  .warp {
    position: relative;
    display: inline-block;
    overflow: visible;
    box-sizing: border-box;
    height: 100%;
  }
  .tree-content {
    width: 300px;
    .header {
      position: relative;
      padding: 0 14px;
      height: 40px;
      font-size: 16px;
      color: #222222;
      background: #ebeef5;
      line-height: 40px;
    }
  }
  .close {
    position: absolute;
    top: 50%;
    right: -20px;
    width: 20px;
    height: 100px;
    border: 1px solid rgba(0,0,0,0.1);
    border-left: none;
    border-radius: 0 2px 2px 0;
    line-height: 100px;
    transform: translateY(-50%);
    cursor: pointer;
    background: #ebeef5;
  }
}
.page-legend {
  position: absolute;
  right: 24px;
  bottom: 34px;
  z-index: 2;
  background: #ffffff;
}
.marker-info {
  /deep/ .ant-descriptions-item {
    padding-bottom: 8px;
  }
}
/deep/ .ant-descriptions-item-label {
  width: 150px;
}
.reslut-filds {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 340px;
  background: #ffffff;
  box-shadow: #f3f3f3 0 0 10px;
}
</style>
